<template>
  <div class="xtx-pagination">
    <!-- 点击切换页码 并且高亮当前的页码 判断如果到页码1 让上一页禁用 -->
    <a @click='changePage(currentPage - 1)' :class="{disabled: currentPage === 1}" href="javascript:;">上一页</a>
    <!-- 左侧的小点点 前面大于6的时候加上点点-->
    <span v-if='currentPage > 6'>...</span>
    <!-- 点击切换页码 并且高亮当前的页码 判断如果到页码到最后 让下一页禁用 -->
    <a @click='changePage(item)' href="javascript:;" :class='{active: currentPage === item}' v-for='item in pageNumList' :key='item'>{{item}}</a>
    <!-- 右侧的小点点 后面倒数第四时候显示点点 -->
    <span v-if='currentPage < pageCount - 4'>...</span>
    <a @click='changePage(currentPage + 1)' :class='{disabled: currentPage === pageCount}' href="javascript:;">下一页</a>
  </div>
</template>
<script>
import { ref, toRef, computed } from 'vue'
export default {
  name: 'XtxPagination',
  props: {
    // total表示总共的分页数据
    total: {
      type: Number,
      required: true
    },
    // pagesize表示每页分页数据的条数
    pagesize: {
      type: Number,
      default: 10
    }
  },
  setup (props, { emit, attrs }) {
    // attrs表示父组件传递过来的非props之外的属性（那么这种属性本身就不是响应式的）
    // 获取当前页码的初始值
    // const initPage = attrs.page
    // 实现分页逻辑
    // 1. 列表数据总数 必填 用来计算多少页码数据
    const total = toRef(props, 'total')
    // 2. 每页的条数 必填 用来展示数据 和 计算多少页码数据
    const pagesize = toRef(props, 'pagesize')
    // 3. 动态计算总页数 计算页码的总数
    const pageCount = computed(() => Math.ceil(total.value / pagesize.value))
    // 4. 当前页码 选填 接收指定当前页码(接收固定)
    const currentPage = ref(attrs.page || 1)
    // 前面优化10页码内样式
    const ret = computed(() => pageCount.value > 10 ? 10 : pageCount.value)
    // 倒数优化10页码内样式
    const data = computed(() => pageCount.value < 10 ? 8 : 9)
    // 当前显示的页码列表 获取相应页码的数据
    const pageNumList = computed(() => {
      const pages = []
      // 前面六条后的时候进行处理
      if (currentPage.value <= 6) {
        // 开始的页码处理 显示10个页码
        for (let i = 1; i <= ret.value; i++) {
          pages.push(i)
        }
        // 倒数第4的时候进行处理
      } else if (currentPage.value >= pageCount.value - 4) {
        // 最后的页码处理
        for (let i = pageCount.value - data.value; i <= pageCount.value; i++) {
          pages.push(i)
        }
      } else {
        // 中间的页码处理
        // 左侧和右侧的逻辑
        for (let i = currentPage.value - 5; i <= currentPage.value + 4; i++) {
          pages.push(i)
        }
      }
      return pages
    })
    // 控制点击切换页码
    const changePage = (page) => {
      // 页码到了最左侧
      if (page === 0) return // 点击事件是-1 所以为0
      // 页码到了最右侧
      else if (page === pageCount.value + 1) return // 点击事件是-1 所以为+1
      currentPage.value = page
      // 把最新的页码传递给父组件(通过页码实现分页功能)
      emit('change-page', page)
    }
    return { pageNumList, currentPage, pageCount, changePage }
  }
}
</script>
<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: #27ba9b;
    }
    &.active {
      background: #27ba9b;
      color: #fff;
      border-color: #27ba9b;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333;
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>
